/* 
 * These styles are required for the script to work properly 
 */

div.toggleBtn {	position:relative; overflow: hidden; float:left; }

div.toggleBtn * { outline:none; }
                
div.toggleBtn input[type=checkbox] { display:block; float:left; }
                
div.toggleBtn label { display:block; float:left; margin:1px 8px 6px 5px; }
                
div.toggleBtn button {
    display:block; float:left;
    margin:0 7px 0 0; padding:5px 7px 6px 7px; /* Links */
    background-color:#f5f5f5; border:1px solid #ccc;
    font-size:100%; line-height:130%; text-decoration:none; color:#565656;
    cursor:pointer; display:none;
}
                
div.toggleBtn button{ width:auto; overflow:visible; padding:4px 7px 3px 7px; /* IE6 */ }
                
div.toggleBtn button[type]{ padding:5px 7px 5px 7px; /* Firefox */ /*line-height:17px;  Safari */ }
                
*:first-child+html button[type]{ padding:4px 7px 3px 7px; /* IE7 */ }

div.toggleBtn button:active,
div.toggleBtn button:hover,
div.toggleBtn button:focus { border:1px solid #a4a4a4; }
                
div.toggleBtn button.toggled { border:1px solid #C6D880; background-color:#E6EFC2; }
                
div.toggleBtn button img { margin:0 2px -3px -1px !important; padding:0; border:none; width:16px; height:16px; }
                
div.toggleBtn input.hidden,
div.toggleBtn label.hidden { position:absolute; left:-600px; top:0; z-index: -1; }


/* 
 * Styles are for the demo
 * These styles actually 'style' the toggle buttons
 */

#single, #normal, #preselected, #failover, #singlefailover, #imgholder, h1 {
    position:relative;
    display:block;
    clear:both;
    overflow:auto;
}

#single, #normal, #preselected, #failover, #singlefailover, #imgholder, hr {
    margin-bottom:40px;
}

#buttonImg {
    width:110px;
    height:30px;
    background-image: url(images/toggleButton.gif);
    cursor: pointer;
}

#buttonImg.toggled {
    background-position: -110px 0;
}